<template>
  <div v-if="series && series.length">
    <div class="home-title pt-32 pb-16">其他基础课程</div>
    <div class="theme-course">
      <div class="theme-bg"></div>
      <div class="course-body">
        <div class="course-title">
          <div>所有讲师的基础课程</div>
          <div class="more" v-if="series.length > 3" @click="expand">
            <template v-if="expandAll">
              <div class="mr-10">收起</div>
              <div class="icon-list-up"></div>
            </template>
            <template v-else>
              <div class="mr-10">展开</div>
              <div class="icon-list-down"></div>
            </template>
          </div>
        </div>
        <div class="course-info">
          <template v-for="(item, index) in series">
            <!-- 赠送课程全部有权限 -->
            <CourseRow
              v-if="index < 3 || lazyLoad"
              v-show="index < 3 || expandAll"
              auth="1"
              :isWindowShow="isWindowShow"
              :info="item"
              :key="index"
            ></CourseRow>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CourseRow from './live/CourseRow.vue';
import query from '@/lib/query.js';
import { eventBus } from '@/lib/eventBus.js';
export default {
  name: 'GiveCourse',
  components: { CourseRow },
  data() {
    return {
      series: [],
      // 首次不加载隐藏的课程
      lazyLoad: false,
      expandAll: false,
      isWindowShow: true,
    };
  },
  mounted() {
    this.queryList();
    this.initOnshow();
  },
  beforeDestroy() {
    eventBus.$off('onShow', {});
  },
  methods: {
    initOnshow() {
      // 初始化onshow事件，主要为了从课程页返回时更新记录,为了减少总线监听，放在父组件
      eventBus.$on('onShow', type => {
        this.isWindowShow = type;
      });
    },
    expand() {
      this.lazyLoad = true;
      this.expandAll = !this.expandAll;
    },
    queryList() {
      query
        .getGiveList()
        .then(res => {
          if (res.data && res.data.auth) {
            this.series = res.data.series_list;
          }
        })
        .catch(err => {
          // 这里失败仅板块不展示
          this.catchErrHandler(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.theme-course {
  overflow: hidden;
  background-image: linear-gradient(180deg, #fef8f1 0%, #ffffff 3rem, #ffffff 3rem);
  border-radius: 0.12rem;
  position: relative;
}
.theme-icon {
  display: block;
  position: absolute;
  top: 1rem;
  right: 0.46rem;
}
.course-info {
  display: flex;
  flex-direction: column;
  .course-row {
    margin-top: 0.28rem;
    &:first-child {
      margin-top: 0;
    }
  }
}
.course-body {
  padding: 0.22rem 0.2rem 0.28rem;
  .course-title {
    padding: 0.28rem 0 0.24rem;
    height: 0.36rem;
    font-size: 0.28rem;
    line-height: 0.36rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    .more {
      font-size: 0.24rem;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
      line-height: 0.36rem;
      display: flex;
      align-items: center;
      .icon-more {
        width: 0.1rem;
        height: 0.18rem;
        background-image: url('../assets/images/icon-more.png');
        background-size: 100% 100%;
      }
    }
  }
}
</style>
